/**
 * Created by zsgjs on 2017/2/10.
 */


import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    Text,
    Button,
    WebView,
    TouchableOpacity
} from 'react-native';
import model from '../classes/Model'
const WEBVIEW_REF = 'webview';
const DIALOG_REF = 'Dialog';

const Dialog = require('../classes/Dialog.js');

const DetailPage = React.createClass({

    render() {
        return (
            <View style={{flex: 1}}>
                <View >
                    <View style={detailStyle.navStyle}>
                        <View style={detailStyle.navContentStyle}>
                            <TouchableOpacity
                                onPress = {()=>this.popBack()}
                            >
                                <View style={detailStyle.backItemStyle}><Text style={{color: 'white', fontSize: 17, fontWeight:'bold'}}>{"<"}</Text></View>
                            </TouchableOpacity>
                            <View style={detailStyle.rightItem}>
                                <Text style={detailStyle.commentButton}>0评论</Text>
                                <Button
                                    style={detailStyle.shareStyle}
                                    onPress={()=>this.buttonClick()}
                                    title="share"
                                    color="white"
                                    accessibilityLabel="Learn more about this purple button"
                                />

                            </View>
                            <Text style={detailStyle.titleStyle}>{this.props.navTitle}</Text>
                        </View>
                    </View>


                </View>

                <WebView
                    ref={WEBVIEW_REF}
                    source = {{uri: this.props.htmlURL}}
                    style={detailStyle.webStyle}
                    onLoadStart={this.onloadStart}
                    onLoadEnd={this.onLoadEnd}
                />
                <Dialog
                    ref={DIALOG_REF}
                    site={this.props.htmlURL}
                ></Dialog>
            </View>


        )
    },

    componentDidMount() {
    },

    onloadStart() {
        this.refs[DIALOG_REF].animateStart();
    },

    onLoadEnd() {
        this.refs[DIALOG_REF].animateStop();
    },

    popBack() {
        this.props.navigator.pop();
    },

    buttonClick() {
        // this.props.outputInfo('点击s');
        // this.props.navigator.pop();
        this.refs[DIALOG_REF].animateStart();
    },

});

const detailStyle = StyleSheet.create({
    navStyle: {
        backgroundColor:'red',
        height: 64,
        width: model.screen_w
    },

    navContentStyle: {
        top: 20,
        height: 44,
        alignItems:'center',
        flexDirection:"row",
        justifyContent: 'space-between'
    },

    backItemStyle: {
        marginLeft: 10,
    },

    titleStyle: {
        position:'absolute',
        fontWeight: 'bold',
        fontSize:18,
        height: 44,
        width: 100,
        left: (model.screen_w - 100) * 0.5,
        top: 0,
        textAlign:"center",
        lineHeight: 44,
        color:'white',
        backgroundColor: 'rgba(255, 255, 255, 0)'
    },

    rightItem: {
        height: 44,
        flexDirection:'row',
        alignItems:'center'
    },

    commentButton: {
        width: 50,
        height: 20,
        color:'white',
        fontSize: 12,
        borderRadius: 10,
        borderWidth:1,
        borderColor:'white',
        textAlign:'center',
        lineHeight:20
    },

    shareStyle: {
        height: 30,
        borderRadius: 3,
        color: 'white',
        lineHeight:30
    },

    webStyle: {
        height: model.screen_h - 64,
    }
});

module.exports = DetailPage;